{{- if .Site.Params.Palettes }}
<li class="nav-item dropdown col-6 col-xxl-auto">
    <a class="nav-link px-0 py-2 px-xxl-1" href="#" id="paletteDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fas fa-fw fa-palette"></i>
        <span class="d-xxl-none">{{ i18n "palette" }}</span>
    </a>
    <ul class="palette-dropdown-menu dropdown-menu dropdown-menu-end px-2 row g-2" aria-labelledby="paletteDropdown">
        {{- range .Site.Params.Palettes }}
            {{- $key := replace . " " "-" }}
            {{- $title := replace . " " "_" | printf "color_%s" | i18n }}
            <li class="col-4 my-1">
                <a role="button" id="palette-{{ $key }}" aria-label="{{ $title }}"
                    class="btn btn-sm w-100 palette text-bg-{{ $key }}" data-palette="{{ $key }}">
                </a>
            </li>
        {{- end }}
    </ul>
</li>
{{- end -}}
